<template>
  <div>
    <el-dialog :visible.sync="centerDialogVisible"
               center
               class="abow_dialog"
               :title="this.title">
      <div style="color:darkorange;text-align:right;margin: auto;width: max-content;max-height: 100%;">
        <div v-if="insertOrUpdate">
          实验室机房：<el-input v-model="in_labId"
                    class="input3"
                    placeholder="机房"
                    style="width: 200px"></el-input>
        </div>
        实验室名称：<el-input v-model="in_labName"
                  class="input3"
                  placeholder="实验室"
                  style="width: 200px"></el-input>
        <br>
        实验室类型：<template>
          <el-select v-model="in_labType"
                     class="input3"
                     clearable
                     style="width: 200px;"
                     placeholder="类型">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </template>
        <br><br>
        设备数量：<el-input v-model="in_labEquipment"
                  class="input3"
                  placeholder="设备数量"
                  style="width: 200px"></el-input>
        <br>
        实验员：<template>
          <el-select v-model="in_userId"
                     class="input3"
                     clearable
                     style="width: 200px;"
                     placeholder="实验员">
            <el-option v-for="item in testOption"
                       :key="item.userId"
                       :label="item.name"
                       :value="item.userId">
            </el-option>
          </el-select>
        </template><br><br>
        <div style="text-align:center">
          <el-button class="botton"
                     @click="centerDialogVisible=false">取 消</el-button>
          <el-button class="botton"
                     @click="insertConfirm()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <div style="color: darkorange; font-size: small; height: 30px">
      <el-input v-model="to_labId"
                class="input"
                placeholder="机房"
                style="width: 100px"></el-input>&nbsp;
      <el-input v-model="to_labName"
                class="input"
                placeholder="实验室"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_labType"
                   class="input"
                   clearable
                   style="width: 100px;margin-right: 8px;"
                   placeholder="类型">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </template>
      <el-input v-model="to_labEquipment"
                class="input"
                placeholder="设备数量"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_userId"
                   @change="load()"
                   class="input"
                   clearable
                   style="width: 100px;"
                   placeholder="实验员">
          <el-option v-for="item in testOption"
                     :key="item.userId"
                     :label="item.name"
                     :value="item.userId">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-button class="botton"
                 @click="load()">搜索</el-button>
      <el-button class="botton"
                 @click="insertInfo()">新增 <i class="el-icon-circle-plus"></i></el-button>
      <el-button class="botton"
                 @click="multipleDelete()">批量删除 <i class="el-icon-remove-outline"></i></el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                fit
                style="width: 100%"
                @selection-change="HandleSelectChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column sortable
                         label="机房"
                         prop="labId"></el-table-column>
        <el-table-column sortable
                         label="实验室"
                         prop="labName"></el-table-column>
        <el-table-column sortable
                         label="类型"
                         prop="labTypeString"></el-table-column>
        <el-table-column sortable
                         label="设备数量"
                         prop="equipment"></el-table-column>
        <el-table-column label="实验员"
                         prop="user.name"></el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="100px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button circle
                         icon="el-icon-edit"
                         type="warning"
                         @click="editInfo(scope.row)"></el-button>
              <el-button circle
                         icon="el-icon-delete"
                         type="danger"
                         @click="deleteLab(scope.row.labId)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>  
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      tableData: [],
      total: 0,
      page: 1,
      title: "",
      centerDialogVisible: false,
      insertOrUpdate: true,

      testOption: [],
      options: [{
        value: '0',
        label: '软件'
      }, {
        value: '1',
        label: '硬件'
      }, {
        value: '2',
        label: '网络'
      }],

      in_labName: "",
      in_labId: "",
      in_labType: "",
      in_labEquipment: '',
      in_userId: "",

      to_labName: "",
      to_labType: "",
      to_labId: "",
      to_labEquipment: "",
      to_userId: "",
      multipleSelection: [],
    };
  },
  methods: {
    insertInfo () {
      this.clearInfo()
      this.insertOrUpdate = true
      this.title = "新增实验室"
      this.centerDialogVisible = true;
    },
    editInfo (row) {
      this.clearInfo()
      this.title = "修改实验室信息"
      this.insertOrUpdate = false
      this.in_labName = row.labName
      this.in_labId = row.labId
      this.in_labType = row.labTypeString
      this.in_labEquipment = row.equipment
      this.in_userId = row.userId
      this.centerDialogVisible = true
    },
    clearInfo () {
      this.in_labName = ""
      this.in_labId = ""
      this.in_labType = ""
      this.in_labEquipment = ""
      this.in_userId = ""
    },
    async insertConfirm () {
      if (this.insertOrUpdate === true) {
        await this.$http.post("/lab", {
          labId: this.in_labId,
          labType: this.in_labType,
          equipment: this.in_labEquipment,
          userId: this.in_userId,
          labName: this.in_labName
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) {
            this.$message("插入成功")
          }
          else {
            this.$message(res.data.errorMsg)
          }
        })
      };
      if (this.insertOrUpdate === false) {
        if (this.in_labType === '软件') {
          this.in_labType = 0;
        } else if (this.in_labType === '硬件') {
          this.in_labType = 1;
        } else if (this.in_labType === '网络') {
          this.in_labType = 2;
        }
        await this.$http.put("/lab", {
          labId: this.in_labId,
          labType: this.in_labType,
          equipment: this.in_labEquipment,
          userId: this.in_userId,
          labName: this.in_labName
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) {
            this.$message("修改成功")
          }
          else {
            this.$message(res.data.errorMsg)
          }
        })
      }
      this.centerDialogVisible = false;
      this.load();
    },

    HandleSelectChange (val) {
      this.multipleSelection = val;
    },
    async multipleDelete () {
      var id = this.multipleSelection.map((v) => v.labId);
      for (var i = 0; i < id.length; i++) {
        await this.$http.delete("/lab/" + id[i],{ headers: { 'userId': this.token } }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          else { this.$message("批量删除成功") }
        });
      }
      this.load();
    },
    async deleteLab (id) {
      await this.$http.delete("/lab/" + id, { headers: { 'userId': this.token } })
        .then((res) => {
          if (res.data.success === true) { this.$message("删除成功") }
          else { this.$message(res.data.errorMsg) }
        });
      this.load();
    },

    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
    load () {
      this.$http.post("/lab/1", {
        labId: this.to_labId,
        labName: this.to_labName,
        labType: this.to_labType,
        equipment: this.to_labEquipment,
        userId: this.to_userId,
        page: this.page,
      }).then((res) => {
        if (res.data.success === true) { }
        else { this.$message(res.data.errorMsg) }
        this.tableData = res.data.data;
        this.total = res.data.total
      });
    },
  },
  created () {
    this.$http.post("/user/notStu", {
      job: 2
    }).then((res) => {
      this.testOption = res.data.data
    })
    this.load();
  },
};
</script>


<style scoped>
::v-deep .el-dialog {
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 200px;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>